<template>
    <div>
        <div class="container-fluid">
            <div class="nav-portrait">
                <div class="title">
                    <div class="active">做有情怀的商业传奇</div>
                    <div>ZUOYOUQINGHUAIDESHANGYECHUANGQI</div>
                </div>
            </div>
        </div>
        <div class="second-nav-box">
            <div class="container">
                <ul class="second-nav">
                    <li :class="{'sec-active': currentTab == 1}" @click="currentTab = 1">公司简介</li>
                    <li :class="{'sec-active': currentTab == 2}" @click="currentTab = 2">匠人匠品</li>
                    <li :class="{'sec-active': currentTab == 3}" @click="currentTab = 3">发展历程</li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div class="container" v-if="currentTab == 1">
                <div class="support-head">相关机构</div>
                <div class="support-box">
                    <div>
                        <img src="../../assets/1/1.jpg" alt="">
                    </div>
                    <div>
                        <div class="support-title">海梦坊酒业</div>
                        <div class="support-content">海梦坊酒业是以泉商为代表的商界精英、海尔集团原中心总经理、茅台股份酿造和勾调大师，在茅台镇联合创立的实体企业。生态基地年酿造规模5000吨，储酒规模20000吨。成功打造“海梦坊、嗨尔蒂克、山两山、泉商梦、鼎醺、伴醺”等品牌。</div>
                    </div>
                </div>
                <div class="support-box right">
                    <div>
                        <img src="../../assets/1/2.jpg" alt="">
                    </div>
                    <div>
                        <div class="support-title">小米生态链谷仓学院</div>
                        <div class="support-content">小米旗下生态链企业，擅长从“0”到“1”，用小米的方法论赋能产品打造“爆款”，全生命周期孵化加速“新国货100”入围企业，成功打造出<b>贝氏牙刷、汉图打印机、须眉剃须刀、芯迈鞋垫等年销售过亿的案例。</b></div>
                    </div>
                </div>
                <div class="support-box">
                    <div>
                        <img src="../../assets/1/13.jpg" alt="">
                    </div>
                    <div>
                        <div class="support-title">流动创艺酒业</div>
                        <div class="support-content">全称“流动创艺（厦门）酒业有限公司”，是由海梦坊&小米谷仓联合共创的企业，以“颜值和情怀是敲门砖，价格是进入的必经之门，品质是关门的锁”为方法论，打造“高颜值、好情怀、价格厚道、品质动人”的品质生活周边产品。以“流动的艺术，时间的价值”为匠心标准，独立开发运营“隽酒”等网红爆款。核心团队由原海尔和茅台高管组成，首创“轻商务社交”概念，打造“会说话的酒”，推广“携手”酒文化。</div>
                    </div>
                </div>
                <div class="support-head">创始人</div>
                <div class="support-box">
                    <div>
                        <img src="../../assets/1/8.jpg" alt="">
                    </div>
                    <div>
                        <div class="support-content"><font color="#717071">我有一个梦，让万千兄弟手手相牵，心心相连；匠选一款<br>酒，将全部诚意融入天酿，无需多言。喝隽酒，携手走。<br>——创始人隽哥</font><br><br><font color="#cf3e43">*谨以隽酒致敬：人生合伙人、事业合伙人、梦想合伙人，<br>携手，托起家庭温馨、事业荣耀、人生巅峰！</font></div>
                    </div>
                </div>
                <div class="support-head">隽酒由来</div>
                <div class="support-box">
                    <div>
                        <img src="../../assets/1/4.jpg" alt="">
                    </div>
                    <div>
                        <div class="support-content">岁月不语，唯酒能言。<br>交心的酒会说话，有话，酒里说：<br>隽（juan）,本义是“美味”，引申为“意味深长”。<br>“隽”加上左右“手”就是“携手”。<br>携手，才是喝酒的真谛。<br><b>喝隽酒，携手走。</b></div>
                    </div>
                </div>
                <div class="support-head">公司愿景</div>
                <div class="support-box right">
                    <div>
                        <img src="../../assets/1/9.jpg" alt="">
                    </div>
                    <div>
                        <div class="support-title">做有情怀的商业传奇</div>
                        <div class="support-content">大师品控、大咖选择、大牌信赖、大众喜爱</div>
                    </div>
                </div>
                <div class="support-box">
                    <div>
                        <img src="../../assets/1/10.jpg" alt="">
                    </div>
                    <div>
                        <div class="support-content">
                            情义兄弟<font color="#cf3e43"><b>自己的酒</b></font>：酒桌上的标配<br>
                            情义兄弟<font color="#cf3e43"><b>心灵家园</b></font>：交朋链友工具<br>
                            情义兄弟<font color="#cf3e43"><b>商汇联盟</b></font>：资源交互平台
                        </div>
                    </div>
                </div>
                <div class="support-head">公司文化</div>
                <div class="support-box right">
                    <div>
                        <img src="../../assets/1/11.jpg" alt="">
                    </div>
                    <div>
                        <div class="support-content">
                            <div class="content-line"><span>核心文化：</span>情义兄弟文化</div>
                            <div class="content-line"><span>价值体现：</span>唯信任不可辜负</div>
                            <div class="content-line"><span>形象IP：</span>兄弟之手</div>
                            <div class="content-line"><span>“兄弟之手”IP：</span>手印专利瓶型 专属携手挂饰</div>
                            <div class="content-line"><span>品牌口号：</span>喝隽酒，携手走</div>
                        </div>
                    </div>
                </div>
                <div class="support-head">携手系列</div>
                <div class="support-box">
                    <div>
                        <img src="../../assets/1/12.jpg" alt="">
                    </div>
                    <div>
                        <div class="support-content">
                            <table class="content-table" border="2px">
                                <tr>
                                    <td class="bold">携手兄弟版</td>
                                    <td>无兄弟·不远征·若同行·定不负</td>
                                </tr>
                                <tr>
                                    <td class="bold">携手交心版</td>
                                    <td>无交心·不欢聚·若同醉·定不负</td>
                                </tr>
                                <tr>
                                    <td class="bold">携手梦想版</td>
                                    <td>无梦想·不拼搏·若同梦·定不负</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="support-head">之手系列</div>
                <div class="support-box right">
                    <div>
                        <img src="../../assets/1/13.jpg" alt="">
                    </div>
                    <div>
                        <div class="support-content">
                            <table class="content-table" border="2px">
                                <tr>
                                    <td class="bold">兄弟之手版</td>
                                    <td class="litter">闯荡世界·开天辟地·共渡难关·好兄弟·奉陪到底</td>
                                </tr>
                                <tr>
                                    <td class="bold">爱人之手版</td>
                                    <td class="litter">高山流水·琴瑟和鸣·花好月圆·心爱人·奉陪到底</td>
                                </tr>
                                <tr>
                                    <td class="bold">贵人之手版</td>
                                    <td class="litter">树鸿鹄之志·展万丈雄风·挥金戈铁马·扫壮丽山河<br>真贵人·奉陪到底</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="support-head">公司理念</div>
                <div class="support-box">
                    <div>
                        <img src="../../assets/1/14.jpg" alt="">
                    </div>
                    <div>
                        <div class="support-content">
                            <div style="font-size: 24px; font-weight: blod; line-height:38px;">以酒链友</div>
                            少即是多，专注成就精品<br>
                            隽酒出品，必是大师作品
                            <div style="font-size: 24px; font-weight: blod; line-height:38px;">与友谋事</div>
                            创造感动，获取终身信赖<br>
                            好酒链友，实现价值交互
                            <div style="font-size: 24px; font-weight: blod; line-height:38px;">以事固友</div>
                            打造高逼格、低姿态、会做事的心灵家园
                        </div>
                    </div>
                </div>
            </div>
            <div class="container" v-if="currentTab == 2">
                <div>
                    <div class="support-head">联创团队</div>
                    <div class="creater">
                        <div class="creater_item">
                            <div class="creater_item--title">创始人</div>
                            <div class="creater_item--content">
                                <div class="c">
                                    <div class="c_item">
                                        <img class="c_item--avatar" src="../../assets/2/1/1.png" alt="">
                                        <div class="c_item--info">
                                            <span>张 朝</span><br>
                                            海尔集团原中心总经理<br>
                                            太平洋建设集团原文经董事长<br>
                                            隽酒/海梦坊创始人
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="creater_item">
                            <div class="creater_item--title">运营团队</div>
                            <div class="creater_item--content">
                                <div class="c">
                                    <div class="c_item">
                                        <img class="c_item--avatar" src="../../assets/2/1/2.png" alt="">
                                        <div class="c_item--info">
                                            <span>刘海荷</span><br>
                                            隽酒联合创始人<br>
                                            海梦坊执行总裁<br>
                                            厦门市泉州商会会长助理<br>
                                            泉州市侨界青年联合会副会长<br>
                                            泉州侨商联合会副会长
                                        </div>
                                    </div>
                                    <div class="c_item">
                                        <img class="c_item--avatar" src="../../assets/2/1/3.png" alt="">
                                        <div class="c_item--info">
                                            <span>陈伟社</span><br>
                                            北京邮电大学MBA<br>
                                            曾任海尔通信大区经理<br>
                                            销售总监及电商渠道负责人
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="creater_item">
                            <div class="creater_item--title">专家团队</div>
                            <div class="creater_item--content">
                                <div class="c">
                                    <div class="c_item">
                                        <img class="c_item--avatar" src="../../assets/2/1/4.png" alt="">
                                        <div class="c_item--info">
                                            <span>陈兴希</span> 酱酒大师<br>
                                            茅台股份科研所原所长<br>
                                            飞天茅台感官合理化标准的修订者<br>
                                            隽酒独立品控专家组组长
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="creater_item" style="margin-bottom: 30px">
                            <div class="creater_item--title">加速团队</div>
                        </div>
                    </div>
                    <div class="group">
                        <div class="group_item">
                            <div class="group_item--title">小米生态链谷仓学院</div>
                            <div class="group_item--content">
                                <img class="group-part" src="../../assets/2/9.jpg" alt="">
                            </div>
                        </div>
                        <div class="group_item">
                            <div class="group_item--title">各商会会长</div>
                            <div class="group_item--content">
                                <div class="group-part mengyou">
                                    <div class="item">
                                        <img class="avatar" src="../../assets/2/7/1.png" alt="">
                                        <div class="uinfo">
                                            <div class="name">李文派</div>
                                            <div class="desc">泉州商会会长</div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img class="avatar" src="../../assets/2/7/2.png" alt="">
                                        <div class="uinfo">
                                            <div class="name">陈文胜</div>
                                            <div class="desc">万林集团董事长</div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img class="avatar" src="../../assets/2/7/3.png" alt="">
                                        <div class="uinfo">
                                            <div class="name">黄华春</div>
                                            <div class="desc">泉州侨界青年联合会长</div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img class="avatar" src="../../assets/2/7/4.png" alt="">
                                        <div class="uinfo">
                                            <div class="name">张 帆</div>
                                            <div class="desc">香港泉州鲤城同乡总会会长</div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img class="avatar" src="../../assets/2/7/5.png" alt="">
                                        <div class="uinfo">
                                            <div class="name">吴俊伟</div>
                                            <div class="desc">福建旅游商品协会会长</div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img class="avatar" src="../../assets/2/7/6.png" alt="">
                                        <div class="uinfo">
                                            <div class="name">陈太林</div>
                                            <div class="desc">瑞鑫大通股份公司董事长</div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img class="avatar" src="../../assets/2/7/7.png" alt="">
                                        <div class="uinfo">
                                            <div class="name">苏福伦</div>
                                            <div class="desc">福建省闽商资本联合会会长</div>
                                        </div>
                                    </div>
                                    <div class="item zhao">
                                        <img class="avatar" src="../../assets/2/7/9.png" alt="">
                                        <div class="uinfo">
                                            <div class="name">赵金涛</div>
                                            <div class="desc">现任A股上市公司华扬联众子公司高管<br>原南方都市报北京总经理<br>原《中国财富》杂志执行总经理</div>
                                        </div>
                                    </div>
                                    <div class="item more" style="min-width: 290px; flex: 1; padding-left">持续更新中......</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="support-head">产品特色</div>
                    <div class="support-box">
                        <div>
                            <img src="../../assets/2/1.jpg" alt="">
                        </div>
                        <div>
                            <div class="support-title">隽酒，大师艺术品</div>
                            <div class="support-content"><b>酱酒大师 陈兴希</b>：茅台股份科研所原所长，飞天茅台感官和理化标准的修订者，隽酒独立品控专家组组长。<br><b>品评意见</b>：隽酒，具有典型的茅台酱酒风格，酱香突出，优雅细腻，酒体醇厚，口感绵柔，空杯留香持久。</div>
                        </div>
                    </div>
                    <div class="support-box right">
                        <div>
                            <img src="../../assets/2/2.jpg" alt="">
                        </div>
                        <div>
                            <div class="support-title">隽酒，会说话的酒</div>
                            <div class="support-content">手印酒瓶：“兄弟之手”瓶型专利号201930217170.9<br>携手配饰：携手，才是喝酒的真谛</div>
                        </div>
                    </div>
                    <div class="support-box">
                        <div>
                            <img src="../../assets/1/12.jpg" alt="">
                        </div>
                        <div>
                            <div class="support-title">情怀表达</div>
                            <div class="support-content">
                                时尚版携手系列：<br>
                                手+隽=携，一瓶隽酒，无需多言，和人生合伙人、事业<br>
                                合伙人、梦想合伙人，交心、做兄弟、成就梦想！喝隽<br>
                                酒 携手走！<br>
                                <span style="color: #cf3e43">
                                    交心版：无交心，不欢聚；若同醉，定不负。<br>
                                    兄弟版：无兄弟，不远征；若同行，定不负。<br>
                                    梦想版：无梦想，不拼搏，若同梦，定不负。
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="support-box right">
                        <div>
                            <img src="../../assets/1/13.jpg" alt="">
                        </div>
                        <div>
                            <div class="support-title">情怀表达</div>
                            <div class="support-content">
                                轻奢版之手系列：<br>
                                岁月不语，唯酒能言！爱人之手、兄弟之手、贵人之手，托起家庭<br>
                                温馨、事业荣耀，和人生巅峰！喝隽酒 携手走！<br>
                                <span style="color: #cf3e43">
                                    爱人之手：高山流水，琴瑟和鸣，花好月圆。心爱人，奉陪到底！<br>
                                    兄弟之手：闯荡世界，开天辟地，共渡难关。好兄弟，奉陪到底！<br>
                                    贵人之手：树鸿鹄之志，展万丈雄风；挥金戈铁马，扫壮丽山河。真贵人，奉陪到底。
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="support-box">
                        <div>
                            <img src="../../assets/2/3.jpg" alt="">
                        </div>
                        <div>
                            <div class="support-title">隽酒，自然的天酿<br>出了茅台镇，酿不出茅台品质酱香酒</div>
                            <div class="support-content">隽酒获茅台镇7.5平方公里核心产区特有微生物群落加持<br><br><b>原料：小麦 高粱 赤水河水<br>水为酒之魂，粮为酒之肉，曲为酒之骨。</b></div>
                        </div>
                    </div>
                    <div class="support-box right">
                        <div>
                            <img src="../../assets/2/4.jpg" alt="">
                        </div>
                        <div>
                            <div class="support-title">隽酒，流动的艺术</div>
                            <div class="support-content">采用国家非物质文化遗产的“大曲坤沙”古法工艺，端午制曲，重阳投料，九次蒸煮，八次发酵，七次取酒，一年一个生产周期，窖藏3-5年后，用不同窖龄、不同轮次、不同品质、不同典型体的几十上百种基酒勾调成一瓶“艺术级好酒”。</div>
                        </div>
                    </div>
                    <div class="support-box">
                        <div>
                            <img src="../../assets/2/5.jpg" alt="">
                        </div>
                        <div>
                            <div class="support-title">隽酒，时间的味道</div>
                            <div class="support-content">
                                纯天然原生态：五斤粮一斤酒，以酒勾酒，无外在添加<br>
                                好入口不上头：接酒温度高达40度并经多年窖藏，自然不上头<br>
                                酒精度数完美：53度时，酒分子和水分子缔合最紧密，人体亲和力最好<br>
                                香气优雅细腻：迷人的淡淡香气和持久的空杯留香是艺术级酱香酒的特色<br>
                                内含成分丰富：各类物质含量实验室峰值高达1800种，远超其他酒类<br>
                                适饮有益健康：内含SOD和金属硫蛋白等<br>
                                适合长期收藏：“藏新酒，喝老酒”，酒越老越香越好喝价值越高<br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container" v-if="currentTab == 3">
                <div class="show-content" style="">
                    <div class="step-title">小米生态链谷仓创业学院全生命周期孵化加速</div>
                    <ul class="progresss-step">
                        <li>
                            <div class="step-img">
                                <img src="../../assets/3/1.jpg" alt="">
                            </div>
                            <div class="step-content">
                                <div class="step-time">2018.07.27</div>
                                <div>谷仓联合创始人郭剑飞、管理合伙人王浩智一行考察海梦坊茅台基地。</div>
                            </div>
                            <div class="dotted"></div>
                        </li>
                        <li>
                            <div class="step-img">
                                <img src="../../assets/3/2.jpg" alt="">
                            </div>
                            <div class="step-content">
                                <div class="step-time">2018.12.18</div>
                                <div>海梦坊酒业经谷仓投资委员会审核批准，入营谷仓新国货加速营第八期。</div>
                            </div>
                            <div class="dotted"></div>
                        </li>
                        <li>
                            <div class="step-img">
                                <img src="../../assets/3/3.jpg" alt="">
                            </div>
                            <div class="step-content">
                                <div class="step-time">2018.12.18—12.20</div>
                                <div>北京，第一次加速辅导集训，定市场&定用户——轻商务社交小酒。</div>
                            </div>
                            <div class="dotted"></div>
                        </li>
                        <li>
                            <div class="step-img">
                                <img src="../../assets/3/4.jpg" alt="">
                            </div>
                            <div class="step-content">
                                <div class="step-time">2019.01.23—01.25</div>
                                <div>杭州，第二次加速辅导集训，定产品——“携手概念”瓶型与情怀。</div>
                            </div>
                            <div class="dotted"></div>
                        </li>
                        <li>
                            <div class="step-img">
                                <img src="../../assets/3/5.jpg" alt="">
                            </div>
                            <div class="step-content">
                                <div class="step-time">2019.03.06—03.08</div>
                                <div>北京，第三次加速辅导集训，定策略——小米有品等私域/精品电商为主，京东天猫开放电商为辅。</div>
                            </div>
                            <div class="dotted"></div>
                        </li>
                        <li>
                            <div class="step-img">
                                <img src="../../assets/3/6.jpg" alt="">
                            </div>
                            <div class="step-content">
                                <div class="step-time">2019.05.13—05.15</div>
                                <div>北京，首期用户增长训练营，搭建了洋葱集团、蒜泥互动、有品推手等资源整合平台。</div>
                            </div>
                            <div class="dotted"></div>
                        </li>
                        <li>
                            <div class="step-img">
                                <img src="../../assets/3/7.jpg" alt="">
                            </div>
                            <div class="step-content">
                                <div class="step-time">2019.06.26</div>
                                <div>酒瓶申请专利，隽酒等相关品牌商标注册完成。</div>
                            </div>
                            <div class="dotted"></div>
                        </li>
                        <li>
                            <div class="step-img">
                                <img src="../../assets/3/8.jpg" alt="">
                            </div>
                            <div class="step-content">
                                <div class="step-time">2019年底</div>
                                <div>酒瓶反复打样6版，包装优化设计5个方案后，最终定稿酒瓶和包装方案。</div>
                            </div>
                            <div class="dotted"></div>
                        </li>
                        <li>
                            <div class="step-img">
                                <img src="../../assets/3/9.png" alt="">
                            </div>
                            <div class="step-content">
                                <div class="step-time">2020.03</div>
                                <div>酒瓶和包装完成打样，酒体由茅台股份科研所原所长、飞天茅台感官和理化标准的修订者陈兴希大师勾调完成。</div>
                            </div>
                            <div class="dotted"></div>
                        </li>
                        <li>
                            <div class="step-img">
                                <img src="../../assets/3/10.png" alt="">
                            </div>
                            <div class="step-content">
                                <div class="step-time">2020</div>
                                <div>登录各平台首发。<span style="color: transparent">登录各平台首发。登录各平台首发。登录各平台首发。登录各平台首发。</span></div>
                            </div>
                            <div class="dotted"></div>
                        </li>
                        <li>
                            <div class="step-end">
                                <div>CONTINUES</div>
                            </div>
                            <div class="dotted"></div>
                        </li>
                        <div class="step-line"></div>
                    </ul>
                </div>
            </div>
            <div class="foot-line"></div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentTab: 1
        }
    },
    mounted() {
        if (this.$route.params.tab) {
            this.currentTab = this.$route.params.tab
        }
    }
}
</script>
<style lang="less" scoped>
.show-content {
    text-align: center;
    .step-title {
        display: inline-block;
        font-size: 36px;
        color: #808080;
        padding: 5px 30px;
        background-color: #c4c5c5;
        border-radius: 10px;
        margin-bottom: 80px;
    }
    .progresss-step {
        position: relative;
        list-style: none;
        padding: 0;
        margin: 0;
        color: #949494;
        li {
            padding-bottom: 80px;
            position: relative;
            .step-end, .step-img{
                width: 180px;
                height: 180px;
                border-radius: 50%;
                background: #e63e42;
                margin: 0 auto;
                position: relative;
                z-index: 40;
                overflow: hidden;
                text-align: center;
                line-height: 180px;
                font-size: 24px;
                white-space: nowrap;
                color: #fff;
                word-wrap: break-word;
                word-break: normal;
                border: 1px solid #e2e2e2;
                overflow: hidden;
            }
            .step-img {
                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    border-radius: 50%
                }
            }
            .step-content {
                .step-time {
                    font-size: 18px;
                    color: #000;
                }
                &:nth-child(2) {
                    line-height: 30px;
                }
            }
            .dotted {
                display: none
            }
            &:nth-child(odd) > .step-content {
                position: absolute;
                top: 50%;
                margin-top: -70px;
                text-align: left;
                max-width: 380px;
                left: 0
            }
            &:nth-child(2n) > .step-content {
                position: absolute;
                top: 50%;
                margin-top: -70px;
                right: 0;
                text-align: left;
                max-width: 380px
            }
        }
    }
    .step-line {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -1px;
        bottom: 80px;
        width: 2px;
        background: #e2e2e2;
        z-index: 2;
    }
}
.creater {
    margin-top: 20px;
    .creater_item {
        .creater_item--title {
            display: inline-block;
            position: relative;
            color: #de3e43;
            font-size: 24px;
            &::after {
                position: absolute;
                display: block;
                content: '';
                right: -20px;
                top: 50%;
                transform: translateY(-50%);
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-left: 16px solid #de3e43;
            }
        }
        .creater_item--content {
            padding: 40px 0;
            .c {
                display: flex;
                flex-wrap: wrap;
                .c_item {
                    display: flex;
                    align-items: center;
                    padding: 20px;
                    .c_item--avatar {
                        width: 180px;
                        height: 180px;
                        border-radius: 50%;
                    }
                    .c_item--info {
                        padding: 0 30px 0 20px;
                        font-size: 18px;
                        span {
                            color: #de3e43;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
}
.group {
    .group_item {
        .group_item--title {
            position: relative;
            color: #707070;
            font-size: 26px;
            padding-left: 36px;
            font-weight: normal;
            &::before {
                position: absolute;
                display: block;
                content: '';
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 24px;
                height: 24px;
                background-color: #de3e43;
            }
        }
        .group_item--content {
            .group-part {
                padding: 40px 0;
            }
            .mengyou {
                display: flex;
                flex-wrap: wrap;
                .item {
                    display: flex;
                    align-items: center;
                    width: 33.33%;
                    min-width: 375px;
                    margin-bottom: 25px;
                    .avatar {
                        width: 111px;
                        height: 111px;
                        border-radius: 50%;
                        margin-right: 25px;
                        border: 1px solid #ac1928;
                    }
                    .uinfo {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        color: #777;
                        line-height: 30px;
                        height: 120px;
                        overflow: hidden;
                        position: relative;
                        .name {
                            font-size: 20px;
                            line-height: 48px;
                            color: #bb1928;
                            font-weight: bold;
                        }
                        .desc {
                            font-size: 16px;
                            line-height: 20px;
                        }
                    }
                    &.more {
                        font-size: 30px;
                        color: #717071;
                    }
                    &.zhao {
                        min-width: 460px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 1200px) {
    .creater_item--title {
        font-size: 18px!important;
        &::after {
            right: -15px!important;
            border-top: 6px solid transparent!important;
            border-bottom: 6px solid transparent!important;
            border-left: 10px solid #de3e43!important;
        }
    }
    .group_item--title {
            font-size: 18px!important;
            padding-left: 16px!important;
            &::before {
                width: 8px!important;
                height: 8px!important;
            }
        }
    .group-part {
        width: 100%;
        padding: 20px 0!important;
    }
    .creater_item--content {
        padding: 20px 0!important;
    }
    .c_item--avatar {
        width: 80px!important;
        height: 80px!important;
    }
    .c_item--info {
        font-size: 14px!important;
    }
}
@media screen and (max-width: 1200px) {
    .show-content {
        .step-title {
            font-size: 25px;
            padding-bottom: 20px
        }
        .progresss-step {
            position:relative;
            list-style: none;
            padding: 0;
            margin: 0;
            color: #949494;
            li {
                padding-bottom: 0;
                position: relative;
                .step-img {
                    visibility: hidden;
                }
                .step-end {
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    border: transparent;
                    background: #fff;
                    position: relative;
                    z-index: 40;
                    overflow: hidden;
                    text-align: center;
                    line-height: 100px;
                    font-size: 14px;
                    white-space: nowrap;
                    color: #666;
                    word-wrap: break-word;
                    word-break: normal
                }
                .step-time {
                    font-size: 18px;
                    color: #000
                }
                .dotted {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background: #dfdfdf;
                    position: absolute;
                    top: 25px;
                    left: 40px;
                    display: block
                }
                &:nth-child(2n) > .step-content, &:nth-child(odd) > .step-content {
                    position: absolute;
                    left: 100px;
                    text-align: left
                }
                .step-content:nth-child(2) {
                    line-height: 30px
                }
            }
            .step-line {
                position: absolute;
                top: 0;
                left: 50px;
                bottom: 0;
                width: 2px;
                background: #e2e2e2;
                z-index: 2
            }
        }
    }
}
.foot-line {
    width: 100%;
    margin: 190px auto 30px;
    border-bottom: 1px solid rgba(87, 87, 87, .5);
}
</style>
